<template>
  <el-card>
    <h1 class="me-author-name">欧阳寂岚</h1>
    <div class="me-author-description">
      <span><i class="el-icon-location-outline"></i> &nbsp;北京&房山</span>
      <span><i class="me-icon-job"></i> &nbsp;测试开发</span>
    </div>
    <div class="me-author-tool">
      <i @click="showTool(qq)" :title="qq.title" class="me-icon-QQ"></i>
      <i @click="showTool(gitee)" :title="gitee.title" class="me-icon-github"></i>
    </div>
  </el-card>
</template>
<script>
export default {
  data () {
    return {
      qq: {title: 'QQ', message: '545958344'},
      gitee: {
        title: 'gitee',
        message: '<a target="_blank" href="https://gitee.com/xueml">https://gitee.com/xueml</a>'
      }
    }
  },
  methods: {
    showTool (tool) {
      this.$message({
        duration: 0,
        showClose: true,
        dangerouslyUseHTMLString: true,
        message: '<strong>' + tool.message + '</strong>'
      })
    }
  }
}
</script>

<style>
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 480px;
}
.me-author-name{
    text-align: center;
    font-size: 30px;
    border-bottom: 1px solid #5fb878;
}
.el-card h1{
  padding: 5px;
  line-height: 30px
}
.me-author-description{
  padding: 5px;
  text-align: center;
  line-height: 30px
}
.me-author-description span{
  padding: 10px
}
.me-author-tool{
  padding-top: 10px;
  text-align: center
}
.me-icon-QQ,.me-icon-github{
  font-size: 30px;
  padding: 15px
}
</style>
